<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="onReset">
        <jeepay-text-up v-model:value="vdata.searchData.appId" placeholder="应用APPID" />

        <jeepay-text-up v-model:value="vdata.searchData.receiverId" placeholder="分账接收者ID[精准]" />
        <jeepay-text-up v-model:value="vdata.searchData.receiverAlias" placeholder="接收者账号别名[模糊]" />
        <jeepay-text-up v-model:value="vdata.searchData.receiverGroupId" placeholder="组ID[精准]" />

        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="账号状态（本系统）">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">正常分账</a-select-option>
            <a-select-option value="0">暂停分账</a-select-option>
          </a-select>
        </a-form-item>
        <JeepaySelect ref="ifCodeRef" placeholder="支付接口" :reset="isReset">
          <a-select v-model:value="vdata.searchData.ifCode" @change="ifCodeRef.textupHandle()">
            <a-select-option value="">全部</a-select-option>
            <template v-for="(item) in vdata.ifCodeList" :key="item.ifCode">
              <a-select-option :value="item.ifCode">{{ item.ifName }}[{{ item.ifCode }}]</a-select-option>
            </template>
          </a-select>
        </JeepaySelect>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="receiverId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_DIVISION_RECEIVER_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key === 'receiverId'">
            <a @click="detailFunc(record.receiverId)"><b>{{ record.receiverId }}</b></a>
          </template>
          <template v-if="column.key == 'divisionProfit'">{{ (record.divisionProfit * 100).toFixed(2) + '%' }}</template>
          <template v-if="column.key == 'ifCode'">
            <!-- <template v-if="record.ifCode === 'wxpay'"><span style="color: green"> <wechat-outlined />微信</span></template>
            <template v-else-if="record.ifCode == 'alipay'"><span style="color: dodgerblue"><alipay-circle-outlined /> 支付宝</span></template> -->
            <!-- <template v-else>{{ record.ifCode }}</template> -->
            <template v-for="(item) in vdata.ifCodeList" :key="item.ifCode">
              <div v-if="record.ifCode == item.ifCode">
                <span class="icon-style" :style="{backgroundColor: item.bgColor}">
                  <img class="icon" :src="item.icon">
                </span>
                {{ item.ifName }}
              </div>
            </template>
          </template>

          <!-- 状态（本系统） -->
          <template v-if="column.key == 'state'">
            <div v-if="record.state == 0"><a-badge status="error" text="暂停分账" /></div>
            <div v-else-if="record.state == 1"><a-badge status="processing" text="正常分账" /></div>
            <div v-else><a-badge status="warning" text="未知" /></div>
          </template>

          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_DIVISION_RECEIVER_EDIT')" type="link" @click="editFunc(record.receiverId)">修改</a-button>
              <a-button v-if="$access('ENT_DIVISION_RECEIVER_EDIT') && record.ifCode =='shengpay' " type="link" @click="ifCOdeOpFunc(record.receiverId, record.ifCode)">账户操作</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>

      <!-- 新增收款账号页面  -->
      <ReceiverAdd ref="receiverAdd" :callbackFunc="searchFunc" />

      <!-- 修改 页面组件  -->
      <ReceiverEdit ref="receiverEdit" :callbackFunc="searchFunc" />

      <!-- 引入具体的接口组件  -->
      <AccountOp ref="currentIfCodeOpComponentRef" />
      
      <!-- 详情页面组件  -->
      <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
    </a-card>
  </page-header-wrapper>
</template>
<script lang="ts" setup>
import { API_URL_DIVISION_RECEIVER, API_URL_IFDEFINES_LIST, req } from '@/api/manage'
import ReceiverAdd from './ReceiverAdd.vue'
import ReceiverEdit from './ReceiverEdit.vue'
import AccountOp from './AccountOp.vue'
import InfoDetail from './Detail.vue'
import { onMounted, reactive,ref,getCurrentInstance } from 'vue'
const { $access } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([
  { key: 'receiverId', title: '接收方绑定ID' },
  { key: 'appId', dataIndex: 'appId', title: '应用ID' },
  { key: 'receiverGroupId', dataIndex: 'receiverGroupId', title: '组ID' },
  { key: 'ifCode', title: '支付接口' },
  { key: 'receiverAlias', dataIndex: 'receiverAlias', title: '账号别名' },
  { key: 'receiverGroupName', dataIndex: 'receiverGroupName', title: '组名称' },
  { key: 'accNo', dataIndex: 'accNo', title: '分账接收账号' },
  { key: 'accName', dataIndex: 'accName', title: '分账接收账号名称' },
  { key: 'channelAccNo', dataIndex: 'channelAccNo', title: '渠道账号',   },
  { key: 'relationTypeName', dataIndex: 'relationTypeName', title: '分账关系类型' },
  { key: 'state', title: '状态',  align: 'center' },
  { key: 'bindSuccessTime', dataIndex: 'bindSuccessTime', title: '绑定成功时间' },
  { key: 'divisionProfit', dataIndex: 'divisionProfit', title: '默认分账比例'  },
  { key: 'createdAt', title: '创建时间', dataIndex: 'createdAt' },
  { key: 'op', title: '操作',  fixed: 'right', align: 'center' }
])

  const receiverEdit =ref()
  const receiverAdd =ref()
  const infoTable = ref()
  const ifCodeRef = ref()
  const infoDetail = ref()
  const currentIfCodeOpComponentRef = ref()

  const vdata : any = reactive({
    tableColumns: tableColumns,
    searchData: {} as any,
    btnLoading: false,
  })

  onMounted(()=>{
    searchFunc()
      req.list(API_URL_IFDEFINES_LIST, {}).then((res) => {
        vdata.ifCodeList = res
      })
  })

  let isReset = ref(0) // 下拉搜索框是否重置

  function onReset(){
    isReset.value++ // 下拉搜索框重置
    vdata.searchData = {}
  }

  // 请求table接口数据
  function reqTableDataFunc(params) {
    return req.list(API_URL_DIVISION_RECEIVER, params)
  }

  function searchFunc () { // 点击【查询】按钮点击事件
    vdata.btnLoading = true // 打开查询按钮上的loading
    infoTable.value.refTable(true)
  }

  function addFunc() { // 业务通用【新增】 函数
    // 打开弹层
    receiverAdd.value.show()
  }

  function editFunc(recordId) { // 业务通用【修改】 函数
    receiverEdit.value.show(recordId)
  }

  // 账户操作
  function ifCOdeOpFunc(recordId, selectIfCode){
    currentIfCodeOpComponentRef.value.show(recordId)
  }
  
  function detailFunc (recordId: any) { // 商户详情页
    infoDetail.value.show(recordId)
  }


</script>
<style>
.icon-style{
 
 /* background-color: black; */
 border-radius: 5px;
 padding-left: 2px;
 padding-right: 2px;
}
.icon{
 width: 15px;
 height: 14px;
 margin-bottom: 3px;
}
</style>